<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>练习2</title>
		<style>
			body {
				margin: 0px;
			}
			
			#main {
				background-color: #E7EFE0;
				width: 60%;
				height: 700px;
				margin: 5px auto 0px;
			}
			
			#line1 {
				height: 30px;
				background-color: #369CEC;
				/*z-index: 9;*/
				/*调整组合时的上下层关系：数值越大，在上层；反之，在下层*/
			}
			
			#line1 div {
				margin: 3px 8px;
			}
			
			#line1 div:first-child {
				float: left;
			}
			
			#line1 div:last-child {
				float: right;
			}
			.rowstyle{
				height: 120px;
				border-bottom: dashed 1px red;
			}
			.rowstyle div{
				height: 80%;
				float: left;				
			}
			.rowstyle div:last-child{
				padding-top: 30px;
				/*padding-left: 50px;*/
			}
			.rowstyle div a{
				margin: 0px 50px;
			}
			.rowstyle img{
				margin: 3px 10px;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<div id="main">
			<!--标题栏 -->
			<div id="line1">
				<div>
					<font>计算机图书</font>
				</div>
				<div>
					<font>销售排行榜</font>
				</div>
			</div>
			<!--标题栏结束--->
			<!--正文 -->
			<div>
				<!--正文第一行-->
				<div id="line2" class="rowstyle">
					<div>
						<img src="../img/book1.png" />
					</div>
					<div>
						<a href="#">《使用Struts搭建MVC模式商业应用》</a>
					</div>
				</div>
				<!--正文第一行结束--->
				<!--正文第二行-->
				<div id="line2" class="rowstyle">
					<div>
						<img src="../img/book1.png" />
					</div>
					<div>
						<a href="#">《使用Struts搭建MVC模式商业应用》</a>
					</div>
				</div>
				<!--正文第二行结束--->
				<!--正文第三行-->
				<div id="line2" class="rowstyle">
					<div>
						<img src="../img/book1.png" />
					</div>
					<div>
						<a href="#">《使用Struts搭建MVC模式商业应用》</a>
					</div>
				</div>
				<!--正文第三行结束--->
			</div><!--正文结束 -->
		</div>
	</body>

</html>